// 角色管理页面
import React, { useRef } from "react";

import { Table, Space, Button, Form, Input, Popconfirm, message } from "antd";
import type { TableColumnsType } from "antd";
import { useAntdTable } from "ahooks";

import api from "../../api/role";
import { IRole, IRoleSearchParams } from "../../types/role";
import { formatDateTime } from "../../utils";
import CreateDept from "./CreateDept";
const Role: React.FC = () => {
    const [form] = Form.useForm();
    const deptRef = useRef<{
        showModal: (
            type: string,
            data?: { _id: string } | IRole,
        ) => void,
        upData: () => void
    }>(null); // 定义ref类型

    const columns: TableColumnsType<IRole> = [
        {
            title: '角色名称',
            dataIndex: 'roleName',
            key: 'roleName',
            width: '200',
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            width: '200',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            render: (text) => formatDateTime(new Date(text))
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            render: (text) => formatDateTime(new Date(text))
        },
        {
            title: '操作',
            key: 'action',
            width: '200',
            render: (_, record: IRole) => (
                <Space>
                    <Button type="primary" onClick={
                        () => handleAdd(record)
                    }>编辑</Button>
                    <Button type="primary" onClick={
                        () => handleEdit(record)
                    }
                    >设置权限</Button>
                    <Popconfirm
                        title="警告"
                        description={`确认删除${record.roleName}吗？`}
                        onConfirm={() => handleDelete(record._id)}
                        okText="确认"
                        cancelText="取消"
                    >
                        <Button danger>删除</Button>
                    </Popconfirm>

                </Space>
            ),

        }

    ];



    const getTableData = ({ current, pageSize }: { current: number, pageSize: number }, form: IRoleSearchParams) => {
        // 获取角色数据
        return api.getRoleList({ ...form, pageNum: current, pageSize }).then(res => {
            return {
                total: res.page.total,
                list: res.list
            }
        });
    };
    const { tableProps, search } = useAntdTable(getTableData, {
        form, // 绑定 Ant Design Form
        defaultPageSize: 5,
    });
    // 编辑
    const handleAdd = (record: IRole) => {
        deptRef.current?.showModal('edit', record);
    }
    // 设置权限
    const handleEdit = (record: IRole) => {
        console.log(record);
        deptRef.current?.showModal('set', record);
    }
    // 删除
    const handleDelete = async (id: string) => {
        await api.deleteRole({ _id: id })
        message.success('删除成功');
        search.submit();
    }
    // 新增
    const handleCreate = () => {
        deptRef.current?.showModal('add');
    }


    return (
        <div>
            <Form className="search-form" layout="inline" form={form}>
                <Form.Item name="roleName" label="角色名称">
                    <Input placeholder="请输入角色名称" />
                </Form.Item>
                <Form.Item>
                    <Space>
                        <Button type="primary" className="mr10" onClick={search.submit}>
                            查询
                        </Button>
                        <Button type="primary" onClick={search.reset}>
                            重置
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
            <div className="wrap-table">
                <div className="header">
                    <div className="title">角色列表</div>
                    <div className="action">
                        <Button onClick={handleCreate}>新增</Button>
                    </div>
                </div>
                <Table rowKey={'_id'} columns={columns} {...tableProps} />
            </div>
            <CreateDept deptRef={deptRef} upData={search.submit} /> {/* 传递ref */}
        </div>
    );
};

export default Role;
